<script setup>
  import { ArrowDown } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router';
  import { useI18n } from 'vue-i18n'
  import { ref, reactive } from "vue"
  const { t, locale } = useI18n()
  const activeIndex = ref("1")

  const state = reactive({
    yulan_text: "简体中文"
  })

  const router = useRouter();
  const path = router?.currentRoute?._value?.path
  if (path === "/about") {
    activeIndex.value = "3";
    router.push("/about")
  } else if (path === "/product") {
    router.push("/product")
    activeIndex.value = "2";
  } else {
    router.push("/")
    activeIndex.value = "1";
  }

  const gotoHome = () => router.push("/")

  const handleSelect = (e, path) => {
    activeIndex.value = e;
    router.push(path)
  }

  const goToLogin = (path) => {
    location.href = path
  }

  const handleCommand = (command) => {
    locale.value = command // 切换语言
    if (command === "zh-cn") {
      state.yulan_text = "简体中文"
    } else if (command === "en") {
      state.yulan_text = "English"
    } else if (command === "fr") {
      state.yulan_text = "Français"
    }
  }

</script>

<template>
  <div class="content">
    <div @click="gotoHome" class="logo">
      <img src="@/assets/images/home/logo.png" alt="">
    </div>
    <div class="menu_box">
      <div>
        <ul class="content_meun">
          <li @click="handleSelect('1', '/')" :class="{meun_active: activeIndex === '1'}">{{ t('common.menu.home') }}</li>
          <li @click="handleSelect('2', '/product')" :class="{meun_active: activeIndex === '2'}">{{ t('common.menu.product') }}</li>
          <li @click="handleSelect('3', '/about')" :class="{meun_active: activeIndex === '3'}">{{ t('common.menu.about') }}</li>
        </ul>
      </div>
      <div class="login">
        <el-space wrap>
          <el-button class="animate__animated animate__heartBeat" @click="goToLogin('/control/login')">{{ t('common.menu.free') }}</el-button>
          <el-dropdown @command="handleCommand" class="placement_end" placement="bottom-end">
            <div class="yuyan_box">
              <i class="iconfont icon-cl-hduoyuyan" />
              <span style="margin: 0 5px;">{{ state.yulan_text }}</span>
              <el-icon><ArrowDown /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="zh-cn">简体中文</el-dropdown-item>
                <el-dropdown-item command="en">English</el-dropdown-item>
                <el-dropdown-item command="fr">Français</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </el-space>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.content {
  width: 1200px;
  display: flex;
  align-items: center;
  position: absolute;
  top: 0px;
  .logo {
    width: 120px;
    margin-right: 25px;
    cursor: pointer;
  }
  .menu_box {
    flex: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    ul {
      background: transparent;
      border-bottom: none;
      flex: auto;
      li {
        font-size: 14px;
        color: #0D0C22;
        cursor: pointer;
        a {
          text-decoration: none;
        }
      }
      li:hover {
        background-color: transparent;
      }
    }
    .login {
      width: max-content;
      button {
        border: none;
        color: $base_primary;
      }
      .yuyan_box {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        outline: none;
      }
    }
  }
}
.content_meun {
  display: flex;
  li {
    margin-left: 20px;
    padding: 10px;
  }
}
.meun_active {
  border-bottom: 2px solid $base_primary;
  color: $base_primary !important;
}
</style>
